<template>
  <el-dialog
    v-if="visible"
    title="属性配置"
    width="900px"
    :visible="visible"
    :before-close="() => $emit('update:visible', false)"
  >
    <div class="app-table-action-wrap">
      <el-button
        type="primary"
        icon="el-icon-plus"
        size="small"
        @click="handleAdd"
      >
        新增
      </el-button>
    </div>

    <table-paging
      :table-list="tableList"
      :table-column="tableColumn"
      :table-paging="tablePaging"
      :table-total="tableTotal"
      @pagingChange="handlePaginChange"
    />

    <properties-update
      ref="propertiesUpdate"
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      @handleModalSubmit="handleModalSubmit"
    />
  </el-dialog>
</template>

<script>
import { fetchComponentPropertiesFindPage, fetchComponentPropertiesGet, fetchComponentPropertiesDelete, fetchComponentPropertiesAdd, fetchComponentPropertiesUpdate } from '@/api/basicinfo/parts/properties'
import { TablePaging } from '@/components'
import { tableColumn } from './config'
import PropertiesUpdate from './update'

export default {
  name: 'Properties',
  components: { TablePaging, PropertiesUpdate },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableList: [],
      tableColumn: tableColumn(this.handleEdit, this.handleDelete),
      tableTotal: 0,
      tablePaging: {
        page: 1,
        pagesize: 10
      },

      dialogTitle: '新增',
      dialogVisible: false
    }
  },
  methods: {
    handleQuery() { // 查询
      this.tablePaging = {
        page: 1,
        pagesize: 10
      }
      this.postFindPage()
    },

    handleAdd() { // 添加
      this._setModalData()
      this.dialogVisible = true
    },

    handleEdit(id) { // 修改
      this.postGet(id)
    },

    handleDelete(id) { // 删除
      this.postDelete(id)
    },

    handleModalSubmit(values) { // 弹窗提交
      values.componentTypeId = this.componentTypeId
      if (values.id) {
        this.postUpdate(values)
        return false
      }
      this.postAdd(values)
    },

    hanleClose() { // 弹窗关闭
      this.dialogVisible = false
    },

    handlePaginChange(pageInfo) { // 分页改变
      this.tablePaging = pageInfo
      this.postFindPage()
    },

    _setModalData(title = '新增', visible = true, modalFormData = {}) { // 设置弹窗
      this.dialogTitle = title
      this.dialogVisible = visible
      this.$refs.propertiesUpdate.modalFormData = modalFormData
    },

    postFindPage() { // 查询数据
      fetchComponentPropertiesFindPage({ componentTypeId: this.componentTypeId, ...this.tablePaging })
        .then((res) => {
          const { records, current, size, total } = res
          this.tableList = records
          this.tablePaging = {
            page: current,
            pagesize: size
          }
          this.tableTotal = total
        })
    },

    postAdd(values) { // 添加
      fetchComponentPropertiesAdd(values).then(res => {
        this.dialogVisible = false
        this.$message.success('新增成功')
        this.postFindPage()
      })
    },

    postGet(id) { // 获取详情
      fetchComponentPropertiesGet({ id }).then(res => {
        this._setModalData('修改', true, res)
      })
    },

    postDelete(id) { // 删除
      fetchComponentPropertiesDelete({ id }).then(() => {
        this.$message.success('删除成功')
        this.postFindPage()
      })
    },

    postUpdate(values) { // 更新
      fetchComponentPropertiesUpdate(values).then(() => {
        this.dialogVisible = false
        this.$message.success('修改成功')
        this.postFindPage()
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
